<template>
  <div class="table">
            <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    订单中心
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>虚拟订单</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-input v-model="select_tel" placeholder="筛选：手机号" class="handle-input mr10" style="width:200px;" size="small"></el-input>
            <el-select v-model="select_ordertype" placeholder="筛选交易类型" clearable  class="handle-select mr10" size="small">
                <el-option label="充值" value="0"></el-option>
                <el-option label="提现" value="1"></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>
            <el-date-picker class="handle-date" v-model="select_date" type="daterange" range-separator="至" start-placeholder="交易开始日期" end-placeholder="交易结束日期" :picker-options="orderDatePicker" size="small">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" class="handle-btn" @click="getData" size="small">搜索</el-button>
            <el-button type="default" icon="el-icon-upload" class="handle-btn handle-del mr10" @click="expendToExcel" size="small">导出到excel</el-button>
        </div>
        <el-table :data="orderCenter" border style="width: 100%" ref="multipleTable">
            <el-table-column  prop="a_type_name" label="虚拟币流水号(TxID)" align="center"> 
            </el-table-column>
            <el-table-column  prop="a_type_name" label="虚拟币类型" align="center"> 
            </el-table-column>
            <el-table-column  prop="a_type_name" label="交易数量" align="center"> 
            </el-table-column>
            <el-table-column  prop="a_type_name" label="账单状态" align="center"> 
            </el-table-column>
            <el-table-column  prop="a_type_name" label="平台同步信息" align="center"> 
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template scope="scope">
                    <el-button size="small" @click="orderDetailPop(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @current-change ="handleCurrentChange"
                layout="prev, pager, next"
                :total="all_page">
            </el-pagination>
        </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            cur_page: 1,
            all_page: 1,
            select_tel:'',
            select_date:'',
            orderDatePicker: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_ordertype:'',
            typeCenter:[],
            orderCenter:[
            ],
        }
    },
    methods:{
        handleCurrentChange(val) {
            this.cur_page = val
            this.getData()
        },
        getData(){

        },
        expendToExcel(){

        },
        orderDetailPop(row){

        }
    }
}
</script>
<style scoped>
.handle-input{
    margin: 0 5px 10px 0;
}
.handle-select{
    width: 200px;
    margin: 0 5px 10px 0;
}
.handle-date{
    width:400px;
    height: 30px;
    display:inline-block;
    vertical-align:top;
    margin:0 5px 10px 0;
}
.handle-btn{

    vertical-align:top;
}
</style>
